<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-v1.4.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-v1.4.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-v1.4.4/demo/demo.css">
	<script type="text/javascript" src="./jquery-easyui-v1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="./jquery-easyui-v1.4.4/jquery.easyui.min.js"></script>
	<title>tabs</title>
</head>
<body>
	<button onclick="add()">增加tab</button>
	<br>
	<span style="color:red;font-size:22px">显示下面tab的名字</span>
	<input id= "displaytab" class="easyui-combobox" style="width: 200px;height: 30px;" >
	<br>
	<div class="easyui-tabs" id="tab1" data-options="border:true" style="width: 600px;height: 300px;">
		<div title="normal">
			这是一个正常的tab 高度为300px
			<ul>
				<li>list1</li>
				<li>list2</li>
				<li>list3</li>
				<li>list4</li>
				<li>list5</li>
				<li>list6</li>
				<li>list7</li>
				<li>list8</li>
				<li>list9</li>
				<li>list10</li>
				<li>list11</li>
				<li>list12</li>
				<li>list13</li>
				<li>list14</li>
				<li>list15</li>
			</ul>
		</div>
		<div title="iconCls" data-options="iconCls:'icon-reload'">
			这是一个有图标的tab
		</div>
		<div title="closable" data-options="closable:true">
			这个tab能被关闭
		</div>
		<div title="sub tabs" class="easyui-tabs" data-options="fit:true,pill:true,selected:true" style="padding:10px">
			<br>
			<span style="font-size:20px;color:red;margin:20px">这是一个子tabs</span>
			<br>
			<div title="autoheight" data-options="boarder:true,selected:true">
				这是个气泡样式的tab
				<ul>
					<li>list1</li>
					<li>list2</li>
					<li>list3</li>
					<li>list4</li>
					<li>list5</li>
					<li>list6</li>
					<li>list7</li>
					<li>list8</li>
					<li>list9</li>
					<li>list15</li>
				</ul>
			</div>
			<div title="iconCls" data-options="iconCls:'icon-reload'">
				这是一个有图标的tab
			</div>
			<div title="closable" data-options="closable:true">
				这个tab能被关闭
			</div>
		</div>
		<div title="can no click here" style="display:none">
			这个是不能显示的tab
		</div>
	</div>
	
	<br>
	<br>
	
	<span style="color:red;font-size:22px">设置下面的tab的风格</span>
	<select name="" id="tabstyle" class="easyui-combobox"style="width: 200px;height: 30px">
		<option value="plain">显示控制面板背景</option>
		<option value="narrow">不显示选项卡空隙</option>
		<option value="pill">选项卡样式气泡状</option>
		<option value="justified">选项卡等宽</option>		
	</select>
	<div>
		<input id="style-autopanel" type="text" class="easyui-switchbutton" data-options="onText:'开',offText:'关'" >
		<span style="color:red;font-size:16px">：自动调整面板高宽</span>
		<br>
		<input id="style-plain" type="text" class="easyui-switchbutton" >
		<span style="color:red;font-size:16px">：显示控制面板背景</span>
		<br>
		<input id="style-narrow" type="text" class="easyui-switchbutton" >
		<span style="color:red;font-size:16px">：不显示选项卡空隙</span>
		
		<br>
		<input id="style-pill" type="text" class="easyui-switchbutton" >
		<span style="color:red;font-size:16px">：选项卡样式气泡状</span>
		
		<br>
		<input id="style-justified" type="text" class="easyui-switchbutton" >
		<span style="color:red;font-size:16px">：设置选项卡等宽</span>
		
	</div>
	调整tab的宽度
	<br>
	<br>
	<br>
	<input id="xia_slider" class="easyui-slider" value="300" style="width: 300px;" data-options="min:200,max:500,showTip:true,rule:[200,'|',250,'|',300,'|',350,'|',400,'|',450,'|',500]">
	<br>
	<br>
	<br>
	<div class="easyui-tabs" id="tab2" data-options="plain:true" style="width: 300px;height:auto">
		<div title="autoheight" data-options="boarder:true">
			这是一个自动调整高度.,气泡样式的tab
			<ul>
				<li>list1</li>
				<li>list2</li>
				<li>list3</li>
				<li>list4</li>
				<li>list5</li>
				<li>list6</li>
				<li>list7</li>
				<li>list8</li>
				<li>list9</li>
				<li>list10</li>
				<li>list11</li>
				<li>list12</li>
				<li>list13</li>
				<li>list14</li>
				<li>list15</li>
			</ul>
		</div>
		<div title="iconCls" data-options="iconCls:'icon-reload'">
			这是一个有图标的tab
		</div>
		<div title="closable" data-options="closable:true">
			这个tab能被关闭
		</div>
	</div>

	

	<script>
	$(function(){
		$("#displaytab").combobox("setValue","还没有选中tab");
		$("#tab1").tabs({
			onSelect:function(title){
				//alert(title+' is selected');
				//$("#displaytab").combobox("setValue","你选择了"+title);
				var pp = $("#tab1").tabs("getSelected").panel("options").title;
				$("#displaytab").combobox("setValue","你选择了"+pp);
				//$("#tab1").tabs("options").title
			}
		});
		$("#xia_slider").slider({
			onChange:function(newValue,oldValue){
				$("#tab2").tabs({
						width:newValue,
						height:300
					});
			}
		});
		//var tab2_h = $("#tab2").tabs("height");
		$("#style-autopanel").switchbutton({
			checked: true,
			onChange:function(checked){
				if(checked == true)
				{
					$("#tab2").tabs({
						width:300,
						height:300
					});
				}
				else
				{
					$("#tab2").tabs({
						width:500,
						height:400
					});
				}
			}
		});
		$("#style-plain").switchbutton({
			checked: true,
			onChange:function(checked){
				$("#tab2").tabs({
						plain:checked
					});
			}
		});
		$("#style-narrow").switchbutton({
			checked: false,
			onChange:function(checked){
				$("#tab2").tabs({
						narrow:checked
					});
			}
		});
		$("#style-pill").switchbutton({
			checked: false,
			onChange:function(checked){
				$("#tab2").tabs({
						pill:checked
					});
			}
		});
		$("#style-justified").switchbutton({
			checked: false,
			onChange:function(checked){
				$("#tab2").tabs({
						justified:checked
					});
			}
		});

		$("#tabstyle").combobox({
			onChange:function(value){
				//$("#tab1").tabs("options").pill = true;
				if(value == "plain"){
					$("#style-plain").switchbutton({
						checked:true
					});
					$("#tab2").tabs({
						plain:true
					});
				}
				if(value == "narrow"){
					$("#style-narrow").switchbutton({
						checked:true
					});
					$("#tab2").tabs({
						narrow:true
					});
				}
				if(value == "pill"){
					$("#style-pill").switchbutton({
						checked:true
					});
					$("#tab2").tabs({
						pill:true
					});
				}
				if(value == "justified"){
					$("#style-justified").switchbutton({
						checked:true
					});
					$("#tab2").tabs({
						justified:true
					});
				}
				//alert(value);
			}
		})
	});
	function add(){
		$("#tab1").tabs(
			'add',{
			title: 'new',
			selected: true,
			content:"这是一个新的选项卡面板"
		});
	}
	</script>
</body>
</html>